<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			三级联动的注意点：
			1.select元素的option创建方式:
			【var option = new option（"想显示的内容"）】
			2.select元素中添加option的方式:
			【select。options.add(新创建的option)】
			3.select元素清空所有的option：
			[select.option.length = 0;]
			4.select元素改变时触发的事件：
			【select.onchangge = function（）{}】
			5.select元素当前正在选中的option的序号：
			【select。selectedIndex】，从0开始
			
			
		-->
		 <style>
		 	select{
		 		width: 200px;
		 		height: 30px;
		 	}
		 </style>
	</head>
	<body>
		省：
		<select id="sheng">
			<option>请选择</option>
		</select>
		市：
		<select id="shi">
			<option></option>
		</select>
		区：
		<select id="qu">
			
		</select>
		<script>
		var shengSelect = document.querySelector("#sheng");	
		var shiSelect = document.querySelector("#shi");
		var quSelect = document.querySelector("#qu");
		
		//构建数组
		var shengArr = ["北京","河北","承德"];
		var shiArr = [["东城区","西城区","大前门"],["承德","丰宁","隆华"],["凤山","黄山","少林寺"]];
		var quArr = [
		[["东城1区","东城2区","东城3区"],["西城1区","西城2区","西城3区"],["大前门1区","大前门2区","大前门3区"]],
		[["承德1区","承德2区","承德3区"],["丰宁1区","丰宁2区","丰宁3区"],["隆华1区","隆华2区","隆华3区"]],
		[["凤山1区","凤山区","凤山3区"],["黄山1区","黄山2区","黄山3区"],["少林寺1区","少林寺2区","少林寺3区"]]
		 ]
		var shengIdenx = 0;
		
		
		//页面加载的时候根据省数据源添加省option
		for(var i=0;i<shengArr.length;i++){
		var shengOption  = new Option([shengArr[i]]);
		shengSelect.options.add(shengOption);	
		}
		
	    //当省做出change的时候出发change事件
	    shengSelect.onchange = function(eve){
	     shengIdenx = eve.target.selectedIndex-1;
	     if(shengIdenx == -1){
	     	//用户选中的是【请选择】
	     	shiSelect.options.length = 0;
	     	quSelect.options.length = 0;
	     	return;
	     }else{
	     	shiSelect.options.length = 0;
	     	quSelect.options.length = 0;
	     	//用户选中的是某一个省，那么此时需要加载这个省对应的市
	     	for(var j=0;j<shiArr[shengIdenx].length;j++){
	     		var shiOption = new Option(shiArr[shengIdenx][j]);
	     		shiSelect.options.add(shiOption);
	     	}
	     	//同时加载第一个是对应的区
	     	for(var k=0;k<quArr[shengIdenx][0].length;k++){
	     		var quOption = new Option(quArr[shengIdenx][0][k]);
	     		quSelect.options.add(quOption);
	     	}
	     }
	    } ;
			
		//当市做出change的时候触发change事件
		shiSelect.onchange = function(eve){
			var shiIndex = eve.target.selectedIndex;
			
			quSelect.options.length = 0;
			
			for(var i =0;i<quArr[shengIdenx][shiIndex].length;i++){
				var quOption = new Option(quArr[shengIdenx][shiIndex][i]);
				quSelect.options.add(quOption);
			}
		};
			
			
			
			
			
			/*
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * 
			 * */
		</script>
	</body>
</html>
